<script setup>
const list =  [
  {
    "pagePath": "/pages/apply/apply",
    "iconPath": "/static/image/icon/apply.png",
    "selectedIconPath": "/static/image/icon/apply_selected.png",
    "text": "请假申请"
  },
  {
    "pagePath": "/pages/history/history",
    "iconPath": "/static/image/icon/history.png",
    "selectedIconPath": "/static/image/icon/history_selected.png",
    "text": "请假记录"
  }
]

const toTabbar = (path) => {
  uni.navigateTo({
    url: path
  })
}

const props = defineProps({
  currentIndex:{
    type: Number,
    default: 0
  }
})
</script>

<template>
  <view class="main">
    <view v-for="(item,index) in list" :key="index" @click="toTabbar(item.pagePath)">
      <view style="text-align: center">
        <image v-if="index != props.currentIndex" :src="item.iconPath" id="icon"></image>
        <image v-else :src="item.selectedIconPath" id="icon"></image>
      </view>
      <view>
        {{item.text}}
      </view>
    </view>
  </view>
</template>

<style scoped>
.main{
  display: flex;
  height: 70px;
  width: 100%;
  background-color: #f8f8f8;
  color: #6a6a6a;
  justify-content: space-around;
  position: fixed;
  bottom: 0px;
  z-index: 100;
}

#icon{
  width: 30px;
  height: 30px;
}
</style>